<template>
  <div>
    <div id="simple" ref="simple" style="height:340px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Simple',
  props: {
    chartData: Array,
    type: String
  },
  data () {
    return {
      mychart: {}
    }
  },
  mounted () {
    this.initChart()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  watch: {
    chartData: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  methods: {
    initChart () {
      this.mychart = echarts.init(this.$refs.simple)
      var grayBar = [1, 1, 1, 1, 1, 1, 1]
      var paiming = [7, 6, 5, 4, 3, 2, 1]
      var baifenbi = [] // 蓝条数据 从大到小
      var zongjine = [] // 右上角数据 从大到小
      var xingm = [] // 名称数据 从大到小
      const suffix = this.type === 'scale' ? '%' : '' // 右上角数据后缀
      this.chartData.forEach(ele => {
        xingm.unshift(ele.name)
        zongjine.unshift(ele.subVal)
        baifenbi.unshift(ele.value)
      })
      const option = {
        backgroundColor: 'rgb(12,16,61)',
        color: ['rgb(11,93,254)'], // 进度条颜色
        // title: {
        //   text: this.chartData.name,
        //   left: '16',
        //   top: '16',
        //   textStyle: {
        //     color: '#fff',
        //     fontSize: '14',
        //     fontWeight: 'normal'
        //   }
        // },
        grid: {
          left: '0',
          top: '0',
          right: '0',
          bottom: '0',
          containLabel: true
        },
        xAxis: [
          {
            show: false
          },
          // 由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
          {
            show: false
          }
        ],
        yAxis: {
          type: 'category',
          axisLabel: {
            show: false // 让Y轴数据不显示
          },
          itemStyle: {},
          axisTick: {
            show: false // 隐藏Y轴刻度
          },
          axisLine: {
            show: false // 隐藏Y轴线段
          },
          data: xingm
        },
        series: [
          // 灰条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '30%', // 统计条宽度
            itemStyle: {
              normal: {
                color: 'rgba(102, 102, 102,0.5)'
              }
            },
            z: 1,
            data: grayBar
          },
          // 蓝条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '30%', // 统计条宽度
            max: 1,
            labelLine: {
              show: false
            },
            z: 2,
            data: baifenbi
          },
          // 数据条--------------------我是分割线君------------------------------//
          {
            show: true,
            type: 'bar',
            xAxisIndex: 1, // 代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
            barGap: '-100%',
            barWidth: '30%', // 统计条宽度
            itemStyle: {
              normal: {
                barBorderRadius: 200,
                color: 'rgba(22,203,115,0)'
              }
            },
            label: {
              normal: {
                show: true,
                // label 的position位置可以是top bottom left,right,也可以是固定值
                // 在这里需要上下统一对齐,所以用固定值
                position: [0, '-100%'],
                rich: {
                  // 富文本
                  white: {
                    // 自定义颜色
                    color: '#ffffff'
                  },
                  green: {
                    color: '#70DDA7'
                  },
                  yellow: {
                    color: '#CCB877'
                  },
                  red: {
                    color: '#BC3C47'
                  },
                  gray: {
                    color: '#727CBA'
                  }
                },
                formatter (data) {
                  // 富文本固定格式{colorName|这里填你想要写的内容}
                  if (paiming[data.dataIndex] === 1) {
                    return (
                      '{red|' +
                      paiming[data.dataIndex] +
                      '  ' +
                      xingm[data.dataIndex] +
                      '}' +
                      '                                                           ' +
                      '{white|' +
                      zongjine[data.dataIndex] +
                      suffix +
                      '}'
                    )
                  } else if (paiming[data.dataIndex] === 2) {
                    return (
                      '{yellow|' +
                      paiming[data.dataIndex] +
                      '  ' +
                      xingm[data.dataIndex] +
                      '}' +
                      '                                                           ' +
                      '{white|' +
                      zongjine[data.dataIndex] +
                      suffix +
                      '}'
                    )
                  } else if (paiming[data.dataIndex] === 3) {
                    return (
                      '{green|' +
                      paiming[data.dataIndex] +
                      '  ' +
                      xingm[data.dataIndex] +
                      '}' +
                      '                                                           ' +
                      '{white|' +
                      zongjine[data.dataIndex] +
                      suffix +
                      '}'
                    )
                  } else {
                    return (
                      '{white|' +
                      paiming[data.dataIndex] +
                      '  ' +
                      xingm[data.dataIndex] +
                      '}' +
                      '                                                           ' +
                      '{white|' +
                      zongjine[data.dataIndex] +
                      suffix +
                      '}'
                    )
                  }
                }
              }
            },
            data: zongjine
          }
        ]
      }

      this.mychart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
